<template>
  <div>
    <el-form-item :label=itemAttr.name
                  :label-width="(typeof(itemAttr.labelWidth)==='undefined'?labelWidth:itemAttr.labelWidth)+'px'"
                  :style="'display:'+(typeof(itemAttr.hidden)!='undefined' && itemAttr.hidden?'none': 'block')">
      <!--单行文本或多行文本 :type="item.type==='undefined'?'':item.type"-->
      <el-input v-model="itemAttr.value" v-if="itemAttr.inputType=='text' && itemAttr.type=='input' || itemAttr.type=='bank-card-input' || itemAttr.type=='account-input'"
                :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px;'+'display:'+(typeof(itemAttr.hidden)!='undefined' && itemAttr.hidden?'none': 'block')"
                clearable></el-input>

      <el-input type="textarea" v-model="itemAttr.value" v-if="itemAttr.type=='textarea'"
                :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'"
                clearable></el-input>
      <!--
      :max="typeof(itemAttr.max)==='undefined'?'':itemAttr.max"
                       :min="typeof(itemAttr.min)==='undefined'?'':itemAttr.min"
      -->
      <el-input-number v-model="itemAttr.value" :precision="itemAttr.precision==='undefined'?'0.01':itemAttr.precision"
                       :step="typeof(itemAttr.step)==='undefined'?'0.01':itemAttr.step"

                       v-if="itemAttr.type=='input' && itemAttr.inputType=='number'" clearable
                       :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'"></el-input-number>

      <!--单选框-->
      <el-radio-group v-model="itemAttr.value" v-if="itemAttr.type=='radio-inline'" clearable
                      :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'">
        <el-radio v-for="rItem in itemAttr.options" :label="rItem.id">{{rItem.name}}</el-radio>
      </el-radio-group>

      <!--复选框-->
      <el-checkbox-group v-model="itemAttr.value" v-if="itemAttr.type=='checkbox-inline'" clearable
                         :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'">
        <el-checkbox v-for="rItem in itemAttr.options" :label="rItem.id">{{rItem.name}}</el-checkbox>
      </el-checkbox-group>

      <!---自定义下拉框。可动态绑定数据源或是指定常数数据源-->
      <lemon-e-select :item-attr="itemAttr" v-if="itemAttr.type=='select'" :width="width"></lemon-e-select>

      <lemon-e-rate :item-attr="itemAttr" v-if="itemAttr.type=='money-rote'" :width="rateWidth"></lemon-e-rate>

      <el-switch
        v-model="itemAttr.value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        v-if="itemAttr.type=='switch'">
      </el-switch>

      <el-time-picker
        arrow-control
        v-model="itemAttr.value"
        v-if="itemAttr.type=='time'" clearable
        :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'"
        value-format="HH:mm:ss">
      </el-time-picker>

      <el-date-picker
        v-model="itemAttr.value"
        :type="itemAttr.mode=='date'?'date':itemAttr.mode=='datetime'?'datetime':itemAttr.mode"
        v-if="itemAttr.type=='picker'" clearable
        :style="'width:'+(typeof(itemAttr.width)==='undefined'?width:itemAttr.width)+ 'px'"
        value-format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
  </div>
</template>

<style lang="scss">

</style>

<script>
  import LemonESelect from './LemonESelect'
  import LemonERate from './LemonERate'

  export default {
    name: 'LemonEFormItem',
    components: {LemonESelect, LemonERate},
    props: {
      /*

         width:所有表单控件的宽度；
        labelWidth:所有表单项标题宽度；

         itemAttr:{name:'',labelWidth:'',type:'',value:'',selectItems:[],mode:''},各项代表意义
         name:表单项标题；
         width:表单控件的宽度。若该项有值，优先使用；
        labelWidth:表单项标题宽度。若该项有值，优先使用；
        type:表单项类型。目前包括input(input,textarea,number)，radio，checkbox,select,picker(time,date,datetime),switch;
        selectItems:若是type是radio，checkbox，select,该项有值
        mode:若type是input，picker，该项有值
      */
      width: String,
      labelWidth: String,
      itemAttr: Object
    },
    data() {
      return {
        rateWidth: 100
      }
    }
  }
</script>
